<template>
  <div class="question-list">
    <div class="question-filter">
      <el-form
        :inline="true"
        label-position="right"
        label-width="80px"
        size="small"
        ref="addQusetion"
        :rules="rules"
        :model="query"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="试卷名称" prop="subject_id">
              <el-select
                placeholder="请输入试卷名称"
                v-model="query.subject_name"
                clearable
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目录方向" prop="subject_id">
              <el-select
                placeholder="归属目录"
                v-model="query.directory_id"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签信息" prop="subject_id">
              <el-select
                placeholder="技能标签"
                clearable
                v-model="query.paper_name"
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="试题难度" prop="subject_id">
              <el-radio-group v-model="query.difficulty">
                <el-radio label="1">简单</el-radio>
                <el-radio label="2">中等</el-radio>
                <el-radio label="3">较难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试题类型" prop="subject_id">
              <el-select
                placeholder="请选择题型"
                clearable
                v-model="query.quest_type"
              >
                <el-option
                  v-for="(key, value) in paperTypeList"
                  :key="key"
                  :label="key"
                  :value="value + 1"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="是否为考试真题"
              label-width="120px"
              prop="subject_id"
            >
              <el-radio-group v-model="is_true_question">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-form-item label="试题难度" prop="subject_id">
            <WangEditor />
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 富文本 -->
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import { getPaperList } from "@/api/exam/page";
import WangEditor from "@/components/WangEditor/index.vue";
const defaultItem = {
  subject_id: "",
  directory_id: "",
  paper_name: "",
  difficulty: "",
  show_state: "",
  paper_type: "",
  create_name: "",
  create_time: "",
};
export default {
  name: "addQuestion",
  components: { WangEditor },
  props: {},
  data() {
    return {
      list: [],
      query: { ...defaultItem },
      paperTypeList: ["单选", "多选", "判断", "简答"],
      is_true_question: "",
      rules: {
        subject_id: [
          { required: true, message: "请输入数据", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({ treeList: "subject/treeList" }),
    directoryList() {
      // 目录信息
      if (!this.query.subject_id) {
        return [];
      } else {
        this.query.directory_id = "";
        const result = this.treeList.find(
          (val) => val.id == this.query.subject_id
        );
        return result.children;
      }
    },
    tagList() {
      // 目录信息
      if (!this.query.directory_id) {
        return [];
      } else {
        this.query.tag_id = "";
        const result = this.directoryList.find(
          (val) => val.id == this.query.directory_id
        );
        return result.children;
      }
    },
  },
  watch: {},
  created() {
    this.getPaperList();
    !this.treeList.length && this.loadTreeList({ ...this.query });
  },
  mounted() {},
  methods: {
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    // 获取考试列表
    async getPaperList() {
      const { data } = await getPaperList({
        ...this.query,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.question-list {
  padding: 16px;
}
</style>
